.rate{
    display: inline-block;
    &:hover{
        .item:not(.item:hover) {
            .all {
                color: #fadb14;
            }

            .half {
                opacity: 0;
            }
        }
    }
}
.item {
    display: inline-block;
    color: #eee;
    font-size: 20px;
    padding-right: 8px;
    position: relative;
    cursor: pointer;

    &:hover {
        transform: scale(1.2);
        transition: all 0.3s;

        ~ .item {
            .all,.half {
                color: #eee !important;
            }
        }
    }

    .all:hover {
        color: #fadb14;

        + .half {
            opacity: 0;
        }
    }

    .half {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(50% - 4px);
        overflow: hidden;

        &:hover {
            color: #fadb14;
        }
    }
}